<template>
  <el-dialog v-if="openForm" v-model="openBoole" :close-on-click-modal="false" custom-class="mydialog" title="添加配送信息"
             width="50%" @close="close">
    <el-form ref="openRef" :model="openForm" :rules="rules" size="small">
      <el-form-item prop="tableData" style="width: 100%">

        <el-table ref="singleTable" :data="openForm.tableData" :row-key="handlRowKey" border
                  header-cell-class-name="popover-table-header" highlight-current-row max-height="300px" style="width: 100%"
                  @selection-change="handleSelectionChange">

          <el-table-column :reserve-selection="true" type="selection" width="55"/>

          <el-table-column align="center" label="配送模式">
            <template #default="{row}">
              {{ getLabel('distributor_mode', row.rddType) }}
            </template>
          </el-table-column>

          <el-table-column header-align="center" label="配送商" prop="distributeName"/>

          <el-table-column align="center" label="配送费">
            <template #default="{row}">
              <div v-if="row?.computeMode ==='固定价格'">
                <span>{{ row?.distributePrice }}</span><span>元</span>
              </div>
              <div v-if="row?.computeMode ==='终端价百分比'">
                <span>{{ row?.distributePrice }}%</span><span>终端价</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column align="center" label="配送服务编号" prop="distributeServeNo"/>

        </el-table>
      </el-form-item>

    </el-form>

    <template #footer>
      <div class="dialog-footer" style="display:flex;justify-content:center;align-items:center;">
        <el-button class="border-btn" size="small" style="margin-right: 20px;" @click="close">取消</el-button>

        <el-button class="main-btn" size="small" type="primary" @click="handlSubmit">添加</el-button>
      </div>
    </template>

  </el-dialog>

</template>
<script>
import {inject, onMounted, reactive, toRefs,} from "vue";

export default {
  props: {
    id: {
      type: Number,
      default: 0,
    },
  },
  setup(props, context) {
    const validateTable = (rule, value, callback) => {
      if (data.multipleSelection.length === 0) {
        callback(new Error("至少添加一条数据"));
      } else {
        callback();
      }
    };

    const api = inject("api");
    const data = reactive({
      openForm: {
        tableData: [],
      },
      multipleSelection: [],
      openRef: null,
      rules: {
        tableData: [
          {required: true, validator: validateTable, trigger: "blur"},
        ],
      },
      openBoole: false,
      singleTable: null,
    });

    const handlList = () => {
      api.marketingMatching
          .REGIONAL_DISTRIBUTION_SERVICE(props.id)
          .then((res) => {
            if (res.code === 0) {
              res.data.forEach((item) => {
                item.rddType = "2";
              });
              data.openForm.tableData = res.data || [];
              if (data.multipleSelection && data.multipleSelection.length > 0) {
                toggleSelection(data.multipleSelection);
              }
              let a = [{rddType: "1", id: -1}];
              data.openForm.tableData = [...a, ...data.openForm.tableData];
            }
          });
    };

    const toggleSelection = (rows) => {
      if (rows) {
        rows.forEach((row) => {
          data.singleTable.toggleRowSelection(row, undefined);
        });
      }
    };

    const handlRowKey = (row) => {
      return row.id;
    };

    const handleSelectionChange = (val) => {
      val.forEach((item) => {
        if (item?.id > 0) {
          item.distributeSeverId = item?.id;
        }
      });
      data.multipleSelection = val;
    };

    const close = () => {
      data.openBoole = false;
      data.singleTable.clearSelection();
    };

    const open = (val) => {
      data.multipleSelection = val;
      handlList();
      data.openBoole = true;
    };

    const handlSubmit = () => {
      data.openRef.validate((valid) => {
        if (valid) {
          context.emit("succsessTable", data.multipleSelection);
          close();
        }
      });
    };

    onMounted(() => {
      handlList;
    });

    return {
      ...toRefs(data),
      handlList,
      handlRowKey,
      handleSelectionChange,
      close,
      open,
      handlSubmit,
      toggleSelection,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "@/style/basics.scss";
</style>